<template>
  <router-link :to="'/content/'+id" class="blog-list">
    <div class="list-top clearfix">
      <!-- <div
        class="left"
        :style="{backgroundImage: 'url(' + (picture ? picture : 'static/img/default.png') + ')'}"
      >-->
      <div class="left">
        <img v-lazy="picture" height="100%" />
      </div>
      <div class="blog-context">
        <div class="title" ref="title">{{ title }}</div>
        <div class="summarize" style="-webkit-box-orient: vertical;">{{summary}}</div>
      </div>
    </div>
    <div class="list-bottom">
      <div class="right">阅读全文</div>
      <span class="time">
        <span>{{date}}</span>
      </span>
    </div>
  </router-link>
</template>
<script type="text/ecmascript-6">
export default {
  props: ["summary", "date", "title", "id", "picture"]
};
</script>
<style scoped rel="stylesheet/stylus" lang="stylus">
.blog-list {
  background: #fff;
  display: block;
  margin-top: 20px;
  color: #555;
  border-radius: 8px;
  transition: all 0.5s linear;
  box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.08);
}

.blog-list:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px) translateZ(0);
}

.list-top {
  padding: 15px;
}

.list-top .left {
  width: 150px;
  height: 100px;
  margin-right: 15px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 25, 0.1), 0 5px 18px 1px rgba(0, 0, 50, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.list-top .left img {
  width: 100%;
}

.blog-context {
  overflow: hidden;
}

.list-bottom {
  padding: 15px;
  border-top: 1px solid #F6F6F5;
}

.time, .view, .favor {
  display: inline-block;
  padding-right: 10px;
}

@media (max-width: 767px) {
  .list-top .left {
    width: 100px;
    height: 80px;
  }

  .list-bottom {
    padding: 10px 5%;
    font-size: 12px;
  }
}
</style>
